﻿@model IndoReputation.Views.ViewModels.OfficeViewModel
@{
    ViewBag.Title = "Edit Office";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
    Edit Office</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        @Html.HiddenFor(model => model.ID)
        @Html.HiddenFor(model => model.CreateAt)
        @Html.HiddenFor(model => model.CreateBy)
        <div class="form-data">
            <table class="table-data">
                <tr>
                    <td class="td-label">
                        <div class="editor-label">
                            @Html.LabelFor(model => model.OfficeType, null, true)
                        </div>
                    </td>
                    <td class="td-control">
                        <div class="editor-field">
                            @( Html.Telerik().ComboBoxFor(model => model.OfficeTypeID)
                                .Name("OfficeTypeID")
                                .BindTo(new SelectList(Model.OfficeType, "Value", "Text"))
                                .Placeholder("Select Office Type")
                                .SelectedIndex(0)
                                .Filterable(filtering =>
                                {
                                    filtering.FilterMode(AutoCompleteFilterMode.Contains);
                                })
                                .HighlightFirstMatch(true)
                            )
                            @Html.ValidationMessageFor(model => model.OfficeTypeID)
                        </div>
                    </td>
                </tr>
                <tr>                    
                    <td class="td-label">
                        <div class="editor-label">
                            @Html.LabelFor(model => model.Country, null, true)
                        </div>
                    </td>
                    <td class="td-control">
                        <div class="editor-field">
                            @( Html.Telerik().ComboBoxFor(x => x.CountryID)
                                .Name("CountryID")
                                .BindTo(new SelectList(Model.Country, "Value", "Text")).Placeholder("Select Country...")
                                .SelectedIndex(0)
                                 .CascadeTo("CityId")
                                .DropDownHtmlAttributes(new { style = " white-space:nowrap;" })
                                .Filterable(filtering =>
                                {
                                    filtering.FilterMode(AutoCompleteFilterMode.Contains);
                                })
                                .HighlightFirstMatch(true)
                                )
                            @Html.ValidationMessageFor(model => model.CountryID)
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="td-label">
                        <div class="editor-label">
                            @Html.LabelFor(model => model.City, null, true)
                        </div>
                    </td>
                    <td class="td-control">
                        <div class="editor-field">
                            @( Html.Telerik().ComboBoxFor(x => x.CityId)
                                .Name("CityId")
                                .BindTo(new SelectList(Model.City, "Value", "Text"))
                                .DataBinding(binding => binding.Ajax().Select("_GetDropDownListCity", "Office"))
                                .ClientEvents(events => { events.OnDataBound("ComboBox_OnDataBound"); events.OnLoad("ComboBox_onLoad"); })
                                .Placeholder("Select City...")
                                .Filterable(filtering =>
                                {
                                    filtering.FilterMode(AutoCompleteFilterMode.Contains);
                                })
                                .HighlightFirstMatch(true)
                                .SelectedIndex(0)
                                )
                            @Html.ValidationMessageFor(model => model.CityId)
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="td-label">
                        <div class="editor-label">
                            @Html.LabelFor(model => model.Name, null, true)
                        </div>
                    </td>
                    <td class="td-control">
                        <div class="editor-field">
                            @Html.EditorFor(model => model.Name)
                            @Html.ValidationMessageFor(model => model.Name)
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="td-label">
                        <div class="editor-label">
                            @Html.LabelFor(model => model.Description)
                        </div>
                    </td>
                    <td class="td-control">
                        <div class="editor-field">
                            @Html.EditorFor(model => model.Description)
                            @Html.ValidationMessageFor(model => model.Description)
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="td-label">
                        <div class="editor-label">
                            @Html.Label("Status")
                        </div>
                    </td>
                    <td class="td-control">
                        <div class="editor-field">
                            @Html.CheckBoxFor(model => model.IsEnable)
                            @Html.ValidationMessageFor(model => model.IsEnable)
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <p class="dvbutton">
                            <input type="submit" value="Save" />
                        </p>
                    </td>
                </tr>
            </table>
        </div>
    </fieldset>
}
<div class="div-back">
    @Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript">
    function ComboBox_OnDataBound(e) {        
        var combobox = $(this).data('tComboBox');
        combobox.enable();
        var oldVal = combobox.value;
        if (oldVal == 0) {
            combobox.value(null);
            combobox.text('Select City...');
        }
    }
    function ComboBox_onLoad() {
        var comboboxCT = $('#CountryID').data('tComboBox');
        var combobox = $(this).data('tComboBox'); // $(this) is equivalent to $('#ComboBox')
        combobox.enable();
        //alert(combobox.value() + '-' + combobox.text());
        var ctVal = comboboxCT.value();
        var odlVal = combobox.value();
        var oldTxt = combobox.text();
        //combobox.reload();
        // Use the combobox client object

        $.ajax({
            url: '@Url.Action("_GetDropDownListCity")',
            type: 'POST',
            data: { CountryID: ctVal },
            success: function (result) {
                var lim = result.length;
                for (var i = 0; i < lim; i++) {
                    if (result[i].Value == odlVal) {
                        result[i].Selected = true;
                        break;
                    }
                }
                combobox.dataBind(result);
                combobox.value(odlVal);
                combobox.text(oldTxt);
            }
        });        
    }
</script>
